<template>
    <nav class="nav headFixd">
        <div class="headL" @click="go(0)"></div>
        <div class="headR">
            <div class="barList">
                <div class="barItem">
                    <div class="title">
                        <div class="name" @click="go(0)" :class="activeIndex == 0 ? 'active' : ''">首页</div>
                    </div>
                </div>
                <!-- <div class="barItem">
                    <div class="title">
                        <div class="name" @click="go(1)" :class="activeIndex == 1 ? 'active' : ''">选课</div>
                    </div>
                </div> -->
                <div class="barItem">
                    <div class="title">
                        <div class="name" @click="go(2)" :class="activeIndex == 2 ? 'active' : ''">学习</div>
                        <div class="arrow"></div>
                    </div>
                    <div class="studyContent">
                        <div class="contentItem" v-for="item, index in studyContent" :key="index">
                            <div class="contentTitle">{{ item.name }}</div>
                            <div class="list">
                                <div class="listItem" @click="goOther(item1)" v-for="item1, index1 in item.children"
                                    :key="index1"><i class="icon"
                                        :style="{ backgroundPositionX: item1.x, backgroundPositionY: item1.y }"></i>{{
                                            item1.name
                                        }} </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- <div class="barItem">
                    <div class="title">
                        <div class="name" @click="go(3)" :class="activeIndex == 3 ? 'active' : ''">资讯</div>
                    </div>
                </div> -->
                <!-- <div class="barItem">
                    <div class="title">
                        <div class="name" @click="go(4)" :class="activeIndex == 4 ? 'active' : ''">报考指南</div>
                        <div class="arrow"></div>
                    </div>
                    <div class="newsContent">
                        <div @click="goNews(item)" class="newsItem" v-for="item, index in newsContent" :key="index"> {{
                            item.guideTitle }} </div>
                    </div>
                </div> -->

                <!-- <div class="barItem">
                    <div class="title">
                        <div class="name" @click="go(5)" :class="activeIndex == 5 ? 'active' : ''">关于我们</div>
                    </div>
                </div> -->
            </div>
            <div class="user">
                <div class="login_register" style="" v-if="!isLogin">
                    <el-button type="primary" plain @click="login">登录</el-button>
                    <el-divider direction="vertical" />
                    <el-button type="primary" plain @click="registry">注册</el-button>
                </div>
                <template v-else>
                    <div class="avatar"><img alt="" class="avatarImg" :src="(userInfo.header)">
                        <div class="arrow"></div>
                    </div>
                    <div class="userContent">
                        <div class="userInfo">
                            <div class="userIcon"><img alt="" :src="(userInfo.header)"></div>
                            <div class="nickName_mobile">
                                <div class="nickName">{{ userInfo.name }}</div>
                                <div class="mobile">{{ userInfo.mobile }}</div>
                            </div>
                        </div><a href="/userInfo/detail" target="_blank" class="titleItem user-info"><i
                                class="icon icon1"></i>个人信息</a>

                                
                        <!-- <div class="rowLine"></div> -->
                        <!-- <a href="#/order/list" target="_blank" class="titleItem user-order"><i
                                class="icon icon2"></i>我的订单</a>
                        <a target="_blank" class="titleItem user-order"><i class="icon icon2"></i>我的题库</a>
                        <a target="_blank" class="titleItem user-order"><i class="icon icon2"></i>我的直播</a> -->
                        <!-- <a href="//www.sieredu.com/web/uc/myAccount" target="_blank" class="titleItem user-zhanghu"><i
                                class="icon icon3"></i>账户余额</a>
                        <a href="//user.sieredu.com/coupon" target="_blank" class="titleItem user-coupon"><i
                                class="icon icon4"></i>优惠券</a>
                        <a href="//www.sieredu.com/web/uc/op/myGiftCard" target="_blank" class="titleItem user-card"><i
                                class="icon icon5"></i>礼品卡</a> -->

                        <!-- <div class="rowLine"></div>
                        <a href="#/messageCenter" target="_blank" class="titleItem user-news"><i
                                class="icon icon6"></i>消息中心</a> -->
                        <!-- <a href="//user.sieredu.com/feedBack" target="_blank" class="titleItem user-fankui"><i
                                class="icon icon7"></i>反馈</a> -->

                        <div class="rowLine"></div><a @click="logout" class="titleItem user-out"><i
                                class="icon icon8"></i>退出登录</a>
                    </div>
                </template>

            </div>
        </div>
    </nav>
</template>

<script setup>
// http://cookieStorehost:5173/packages/components/tabs/src/tab-bar.vue
import { ref, watch, onMounted, onBeforeUnmount, computed, onBeforeMount } from 'vue'
import { useRouter } from 'vue-router'
import useCookieStore from '@/stores/cookieStorage';
import useUserStore from '@/stores/user';
import { getToken } from '@/utils/token.js'
import Cookies from 'js-cookie';


import homeApis from '@/apis/home.js'
import userApis from '@/apis/user';
// onBeforeMount(() => {

// })
const props = defineProps({
    showLoginCard: Boolean,
});
const emits = defineEmits(['update:showLoginCard', 'registry'])

const userStore = useUserStore()
let router = useRouter()
let cookieStore = useCookieStore()
let goMap = {
    0: '/',
    1: '/selectCourse',
}

const userInfo = computed(() => {
    // 同步返回
    if (userStore.userInfo) {
        return userStore.userInfo
    } else {
        const userId = Cookies.get('userId')
        if (userId) {
            userApis.detail(Cookies.get('userId')).then(res => {
                let now = new Date()
                userStore.setUserId(userId)
                userStore.setUserInfo(res.data)
                userStore.setTime(now.getTime())
            })
        }
        return {}
    }
})



// const userCards = ref([{

// }])
let activeIndex = computed(() => {
    return cookieStore.activeIndex
})
if (getToken()) {
    cookieStore.setIsLogin(true)
}

let studyContent = ref([{
    name: '学习',
    children: [{
        name: '我的题库',
        url: '/myCourse/myCourseList',
        x: '0',
        y: '0'
    }
    // , {
    //     name: '我的直播',
    //     url: '/myCourse/playerList',
    //     x: '0',
    //     y: '-36px'
    // }
        // , {
        //     name: '卡片',
        //     url: '',
        //     x: '0',
        //     y: '-36px'
        // }, {
        //     name: '学习记录',
        //     url: '',
        //     x: '0',
        //     y: '-72px'
        // }
    //     , {
    //     name: '学习数据',
    //     url: '/myCourse/studyData',
    //     x: '0',
    //     y: '-108px'
    // },
        // {
        //     name: '学习收藏',
        //     url: '',
        //     x: '0',
        //     y: '-144px'
        // }, {
        //     name: '学习计划',
        //     url: '',
        //     x: '0',
        //     y: '-180px'
        // }
        ,
        {
        name: '我的资料',
        url: '/myCourse/assets',
        x: '-36px',
        y: '0'
    }
        , {
        name: '我的视频',
        url: '/myCourse/video',
        x: '-36px',
        y: '-36px'
    }
    ]
},
{
    name: '做题',
    children: [{
        name: '题库',
        url: '/question',
        x: '-36px',
        y: '0'
    },
   
        // , {
        //     name: '错题本',
        //     url: '',
        //     x: '-36px',
        //     y: '-72px'
        // }, {
        //     name: '标记本',
        //     url: '',
        //     x: '-36px',
        //     y: '-108px'
        // }, {
        //     name: '笔记本',
        //     url: '',
        //     x: '-36px',
        //     y: '-144px'
        // },
    ]
},
    // {
    //     name: '答疑',
    //     children: [{
    //         name: '答疑广场',
    //         url: '/qa/list',
    //         x: '-72px',
    //         y: '0'
    //     }, {
    //         name: '发起答疑',
    //         url: '',
    //         x: '-72px',
    //         y: '-36px'
    //     }, {
    //         name: '我的答疑',
    //         url: '',
    //         x: '-72px',
    //         y: '-72px'
    //     }]
    // }, {
    //     name: '实训',
    //     children: [{
    //         name: '实训平台',
    //         url: '',
    //         x: '-108px',
    //         y: '0'
    //     }]
    // }

])
let isLogin = computed(() => cookieStore.isLogin)

const newsContent = ref([])
// watch(() => userInfo, (newVal, oldVal) => {
//     if (newVal) {

//     }
// })



// homeApis.queryGuide().then(res => {
//     if (res.entity) {
//         newsContent.value = res.entity
//     }
// })





function logout() {

    homeApis.logout().then(res => {
        cookieStore.setIsLogin(false)
    })

}
function login() {

    emits('update:showLoginCard', true)
}
function go(index) {
    cookieStore.setActiveIndex(index)
    if (index in goMap) {
        router.push(goMap[index])
    }
}
function registry() {
    emits('registry')

}

function goOther(item) {
    cookieStore.setActiveIndex(2)
    if (item.url != '') {
        router.push(item.url)
    }
}
function goNews(item) {
    cookieStore.setActiveIndex(4)
    router.push(`/guide/index/${item.id}`)
}
</script>
<style scoped>
.headFixd {

    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    /* font: 14px/150%; */
    word-break: break-all;
    box-sizing: border-box;
    height: 60px;
    background: var(--headShadow);
    position: fixed;
    top: 0;
    width: 100%;
    min-width: 1000px;
    z-index: 1000;
    justify-content: space-between;
    align-items: center;
    backdrop-filter: blur(12px) !important;
    box-shadow: 0 8px 20px rgba(69, 71, 77, .05);
    border-bottom: .5px solid var(--gray_93);
    display: flex;
}

.headL {
    width: 119px;
    height: 40px;
    background-image: url('@/assets/images/logo3.png');

    margin-left: 30px;
    background-repeat: no-repeat;
    background-size: 100%;
    cursor: pointer;
}

.headR {
    font: 14px/150%;
    word-break: break-all;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    box-sizing: border-box;
    margin-right: 30px;
    height: 60px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.barList {

    font: 16px;
    cursor: default;
    word-break: break-all;

    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    box-sizing: border-box;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 100%;
}

.barItem {
    word-break: break-all;
    padding: 0 35px;
    justify-content: center;
    position: relative;
    cursor: pointer;
    height: 100%;
    display: flex;
    align-items: center;
}

.barItem .title {
    position: relative;
    height: 100%;

}

.barItem .title:hover {
    color: rgb(0, 0, 0);
    text-shadow: 0 0 1px;
    font-weight: bold;

}

.barItem .title .name {
    height: 100%;
    line-height: 60px;
}

.barItem .title .name.active {
    color: rgb(0, 0, 0);
    text-shadow: 0 0 1px;
    font-weight: bold;
}

.headR .barList .barItem .title .name.active:after {
    content: "";
    height: 3px;
    background-color: var(--green_n);
    width: calc(100% - 4px);
    border-radius: 2px;
    display: block;
    position: absolute;
    left: 2px;
    bottom: 0;
}

.headR .barList .barItem:hover .studyContent {
    display: flex;
}

.studyContent {
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: none;
    justify-content: space-between;
    padding: 30px 20px 20px;
    border: .5px solid var(--gray_95);
    box-sizing: border-box;
    background: var(--bg_white);
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(40, 42, 45, .18823529411764706);
    visibility: visible;
    opacity: 1;
    top: 55px;
    transition: all .3s;
}

.studyContent .contentItem {
    visibility: visible;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    box-sizing: border-box;
    margin-right: 12px;
    width: 160px;
}

.studyContent .contentItem .contentTitle {
    color: var(--gray_50);
    font-size: 14px;
    text-indent: 20px;
    margin-bottom: 12px;
}

.studyContent .contentItem .list {
    display: flex;
    flex-direction: column;
}

.studyContent .contentItem .list .listItem {
    padding-left: 15px;
    border-radius: 8px;
    height: 40px;
    display: flex;
    align-items: center;
    color: var(--gray_20);
    margin-bottom: 10px;
}

.studyContent .contentItem .list .listItem i {
    background-image: url('@/assets/images/study.png');
    display: inline-block;
    width: 28px;
    height: 28px;
    background-size: 540px 288px;
    background-repeat: no-repeat;
    margin-right: 5px;
    margin-left: 0;
    background-position-x: 0px;
    background-position-y: 0px;
}

.barItem:hover .newsContent {
    display: flex;
}

.newsContent {

    position: absolute;
    left: -35px;
    display: none;
    flex-direction: column;
    padding: 20px 20px 15px;
    border: .5px solid var(--gray_95);
    box-sizing: border-box;
    background: var(--bg_white);
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(40, 42, 45, .18823529411764706);
    opacity: 1;
    top: 55px;
    transition: all .3s;
}

.newsContent .newsItem {

    box-sizing: border-box;
    width: 160px;
    line-height: 20px;
    padding: 10px 15px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    font-size: 14px;
    color: var(--gray_20);
    margin-bottom: 5px;
}

.headFixd .headR .user {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.headFixd .headR .user .avatar {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    cursor: pointer;
}

.headFixd .headR .user .avatar .avatarImg {
    width: 32px;
    height: 32px;
    border-radius: 18.9px;
}

.headFixd .headR .user .avatar .arrow {
    width: 10px;
    height: 10px;
    display: inline-block;
    background-image: var(--arrowDown);
    background-repeat: no-repeat;
    background-size: 10px 10px;
    margin-left: 5px;
}

.headFixd .headR .user:hover .avatar .arrow {
    transform: rotate(180deg);
    transition: 0.3s;
}

.headFixd .headR .user:hover .userContent {
    top: 55px;
    opacity: 1;
    visibility: visible;
    transition: 0.3s;
}

.headFixd .headR .user .userContent {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    width: 225px;
    top: 40px;
    right: 10px;
    box-shadow: rgba(40, 42, 45, 0.19) 0px 10px 30px;
    box-sizing: border-box;
    padding: 15px;
    border-radius: 15px;
    border: .5px solid var(--gray_95);
    background: var(--bg_white);
}

.headFixd .headR .user .userContent .userInfo {
    display: flex;
    height: 42px;
    align-items: center;
    padding-left: 5px;
    padding-right: 5px;
    margin-top: 3px;
}

.headFixd .headR .user .userContent .userInfo .userIcon {
    width: 42px;
    height: 42px;
    box-sizing: border-box;
    margin-right: 12px;
}

.headFixd .headR .user .userContent .userInfo .userIcon img {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border-radius: 50%;
    border: 1px solid var(--gray_96);
}

.headFixd .headR .user .userContent .userInfo .nickName_mobile {
    color: var(--gray_70);
    font-family: "PingFang SC";
    font-size: 12px;
    line-height: 14px;
    flex: 1 1 0%;
}

.headFixd .headR .user .userContent .userInfo .nickName_mobile .nickName {
    color: var(--gray_70);
    font-weight: 500;
    font-size: 14px;
    margin-bottom: 4px;
    text-overflow: ellipsis;
    overflow: hidden;
}

.headFixd .headR .user .userContent .titleItem {
    margin-top: 8px;
    padding-left: 12px;
    display: flex;
    align-items: center;
    height: 40px;
    color: var(--gray_20);
    font-family: "PingFang SC";
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    position: relative;
    flex: 1 1 0%;
    border-radius: 6px;
    transition: 0.2s;
}
</style>